<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { pageGetProductApi, Product } from '@/api/hc/iotProduct';
  import { TableProps } from 'ant-design-vue';
  import { PageWrapper } from '@/components/Page';
  import { router } from '@/router';

  const pageSize = ref<number>(10);
  const pageNum = ref<number>(1);
  const total = ref<number>(0);
  const pagination = computed(() => ({
    total: total.value,
    current: pageNum.value,
    pageSize: pageSize.value,
  }));

  onMounted(() => {
    pageGetProduct();
  });

  const productColumns = [
    {
      title: 'name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'productKey',
      dataIndex: 'productKey',
      key: 'productKey',
    },
    {
      title: 'Action',
      key: 'action',
    },
  ];
  const productList = ref<Product[]>([]);

  const handleTableChange: TableProps['onChange'] = (pag: {
    pageSize: number;
    current: number;
  }) => {
    // pageSize.value = pag.pageSize;
    pageNum.value = pag?.current;
    pageGetProduct();
  };

  function pageGetProduct() {
    pageGetProductApi({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }).then((res) => {
      console.log(res);
      productList.value = res.list;
      total.value = res.total;
    });
  }

  function itemClick(product: Product) {
    router.push({ name: 'product_item', params: { productId: product.id } });
  }
</script>

<template>
  <PageWrapper>
    <a-table
      :dataSource="productList"
      :columns="productColumns"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link" @click="itemClick(record)">
              更多
              <down-outlined />
            </a>
          </span>
        </template>
      </template>
    </a-table>
  </PageWrapper>
</template>

<style scoped lang="less"></style>
